<template>
	<view>
		<!-- 参考链接：https://en.uniapp.dcloud.io/uni-app-x/api/showModal.html -->
		<button @click="showConfirmDialog">showConfirmDialog</button>
		
		<button @click="showInputDialog">showInputDialog</button>
		
		<button @click="showBottomSheetDialog">showBottomSheetDialog</button>
		
		<button @click="showBottomCustomDialog">showBottomCustomDialog</button>
		
		<!-- 底部弹窗，u-popup参考链接：https://uniapp.dcloud.net.cn/component/uniui/uni-popup.html -->
		<uni-popup type="bottom" border-radius="10px 10px 0 0" ref="bottomPop">
			<view style="width: 100%;background-color: white;">
				<view style="display: flex;justify-content: space-between;">
					<text style="margin-left: 10rpx;">确定</text>
					<text style="margin-right: 10rpx;">取消</text>
				</view>
				
				<view style="display: flex;flex-wrap: wrap;">
					<text v-for="(item, index) in itmes" 
					style="padding-left: 10rpx;padding-right: 10rpx;padding-top: 5rpx;padding-bottom: 5rpx;margin: 5rpx;background-color: green;border-radius: 5rpx;">hahahahh</text>
				</view>
			</view>
		</uni-popup>
		
		
		<button @click="showLeftDrawer">showLeftDrawer</button>
		
		<!-- u-drawer参考链接：https://uniapp.dcloud.net.cn/component/uniui/uni-drawer.html -->
		<uni-drawer ref="leftDrawer" mode="left">
			<view style="width: 100%;height: 100rpx;background-color: red;">leftDrawer</view>
		</uni-drawer>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itmes:[1, 2, 3, 4, 5, 6, 7, 8, 9]
			}
		},
		methods: {
			showConfirmDialog() {
				// 系统弹窗
				uni.showModal({
					title:"title",
					content:"content",
					showCancel:true,
					cancelText:"取消",
					confirmText:"确定",
				})
			},
			showInputDialog() {
				uni.showModal({
					editable:true,
					title:"输入内容",
					success:(res) => {
						//{"confirm":true,"cancel":false,"content":"aaaaaa","errMsg":"showModal:ok"}
						console.log("res:", JSON.stringify(res))
						setTimeout(function(){
							uni.showToast({
								title:res.content,
								icon:'none'
							})
						}, 1000)
					}
				})
				
			},
			showBottomSheetDialog() {
				uni.showActionSheet({
					title:"choose item",
					itemList:["1", "2", "3", "4", "5"],
					success: (res) => {
						//{"tapIndex":0,"errMsg":"showActionSheet:ok"}
						console.log("action result:", JSON.stringify(res))
					}
				})
			},
			showBottomCustomDialog() {
				this.$refs.bottomPop.open('bottom')
			},
			
			showLeftDrawer() {
				this.$refs.leftDrawer.open()
			}
		}
	}
</script>

<style>
	
button{
	margin-top: 20rpx;
}
</style>
